<template>
	<div id="home">
		<div class="module">
			<div class="module-card" data-card="acFun" @click="gotoAcFunView">
				<div class="module-base">
					<span class="module-title">哈雷彗星</span>
					<el-tag effect="dark">acFun</el-tag>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	
	import { defineComponent } from "vue";
	
	export default defineComponent({
		name: 'HomeView'
	})
	
</script>

<script setup>
	
	import { ref } from 'vue';
	import { useRouter } from 'vue-router';
	
	const router = useRouter();
	
	function gotoAcFunView() {
		router.push({ name: 'acFun' });
	}
	
</script>

<style lang="scss" scoped>
	
	@import '@/theme/define/index.scss';
	@import '@/theme/material/media.scss';
	
	#home {
		@include viewLayout;
	}
	
	.module {
		display: grid;
		grid-template-columns: repeat(2, 50%);
		place-items: start stretch;
		place-content: start stretch;
		gap: 10px;
		@include mediaSm {
			gap: 25px;
			margin: 30px 0;
			grid-template-columns: repeat(3, 33.33%);
		}
		@include mediaMd {
			grid-template-columns: repeat(4, 25%);
		}
		@include mediaLg {
			grid-template-columns: repeat(5, 20%);
		}
	}
	
	.module-card {
		box-shadow: 0 0 10px #d8d8d8;
		background: #fff;
		border-radius: 10px;
		position: relative;
		cursor: pointer;
		&::before {
			content: '';
			display: block;
			padding-top: 61.8%;
		}
	}
	
	.module-base {
		position: absolute;
		top: 10px;
		left: 10px;
		right: 10px;
		display: flex;
		align-items: flex-start;
	}
	
	.module-title {
		flex: 1;
	}
	
</style>
